<template>
    <ui-popup :status="status" @close="popupClose">
        <div class="popup-more">
            <input type="text" name="" id="url" style="width:100px ;height:20px;position: fixed;top:-100000px;left:-10000px">
            <div class="slide" v-if="config.font">
                <div class="pick">
                    <span :class="{'on':popupRange == 1}" @click="popupRange = 1">小</span>
                    <span :class="{'on':popupRange == 2}" @click="popupRange = 2">中</span>
                    <span :class="{'on':popupRange == 3}" @click="popupRange = 3">标准</span>
                    <span :class="{'on':popupRange == 4}" @click="popupRange = 4">大</span>
                    <span :class="{'on':popupRange == 5}" @click="popupRange = 5">巨大</span>
                </div>
                <div class="range" @click="changeSlide($event)">
                    <p class="line">
                        <span :style="popupStyle"></span>
                    </p>
                    <input type="range" min="1" max="5" step="1" v-model="popupRange">
                </div>
            </div>
            <div class="share" :style ='sWeixinBrowser'>
                <div class="item" @click="wxshare">
                    <i class="uicon uicon-wx-share"></i>
                    <span>微信</span>
                </div>
                <div class="item" @click="qqshare">
                    <i class="uicon uicon-qq-share" ></i>
                    <span>QQ</span>
                </div>
                <button @click="linkshare" class="item copy-btn" >
                    <i class="uicon uicon-link-share"></i>
                    <span>复制链接</span>
                    <!-- <input id="foo"  :value="url" style="position: fixed;top:-1000000px"> -->
                </button>
                <div @click="eshare" class="item" >
                    <i class="uicon uicon-email-share"></i>
                    <span>发送邮件</span>
                </div>
            </div>
            <div class="option" v-if="!config.hideOption">
                <div class="item" @click="unlike">
                    <i class="uicon uicon-unlike"></i>
                    <span>不感兴趣</span>
                </div>
                <div class="item" @click="chnageFav" v-if="config.type !== 2">
                    <i class="uicon" :class="{'uicon-fav-o':config.fav,'uicon-fav':!config.fav}"></i>
                    <span>{{!config.fav ? '' : '取消'}}收藏</span>
                </div>
                <div class="item" @click="changeModel">
                    <i class="uicon" :class="{'uicon-night-o':config.night,'uicon-night':!config.night}"></i>
                    <span>{{config.night ? '日间' : '夜间'}}模式</span>
                </div>
                <a @click="reportAction" class="item">
                    <i class="uicon uicon-report"></i>
                    <span>投诉</span>
                </a>
                <div class="item" v-if="config.type == 2"></div>
            </div>
            <a href="javascript:;" class="cancel" @click="popupClose">取消</a>
        </div>
    </ui-popup>
</template>
<script>
import Popup from "./popup.vue";
export default {
    name: "popup-more",
    components: {
        [Popup.name]: Popup
    },
    props: {
        status: {
            type: Boolean,
            default: false
        },
        config: {
            type: Object,
            defalut:()=>{
                return{
                    id: "",
                    type:1,//默认就是新闻1，2 动态
                    fav: false,
                    ngiht: false,
                    font: false,
                    range: 3,
                    hideOption:false,
                    email_title:'泛亚资讯',
                    email_content:''
                }
            }
        }
    },
    data() {
        return {
            popupRange: 3,
            url:window.copy_url || window.location.href,
            message:window.copy_url || window.location.href,
        };
    },
    watch: {
        popupRange(n) {
            this.$emit("font", n);
        }
    },
    computed: {
        popupStyle() {
            return {
                width: (this.popupRange - 1) * 25 + "%"
            };
        },
        sWeixinBrowser() {
            //var share = document.querySelector(".share");
            var agent = navigator.userAgent.toLowerCase();
            if (agent.match(/MicroMessenger/i) == "micromessenger") {
                return {
                    display : 'none'
                };
            } else {
                return {
                    display : 'flex'
                };
                
            }
        }
    },
   
    updated() {
        this.popupRange = this.config.range;
    },
    mounted() {
        this.popupRange = this.config.range;
    },
    methods: {
        // 复制成功
        onCopy(e){
          console.log(e);
        },
        // 复制失败
        onError(e){
          alert("失败");
        },
        
        changeSlide(e) {
            let w = e.currentTarget.getClientRects()[0].width;
            let ratio = e.clientX / w;
            this.popupRange = Math.round(0.5 + ratio / 0.25);
        },
        chnageFav() {
            if (this.$utils.app.isApp) {
                location.href = this.$utils.app.link.collect;
                this.popupClose();
                return false;
            }
            this.$http
                .post("?ct=news&ac=collect", {
                    id: this.config.id,
                    status: !this.config.fav ? 0 : 1
                })
                .then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let txt = !this.config.fav ? "已收藏" : "已取消收藏";
                        this.$toast(txt);
                        this.$emit("fav", !this.config.fav);
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                });
            // this.popup.fav = !this.popup.fav;
        },
        changeModel(e) {
            this.$emit("night", !this.config.fav);
            // this.popup.nightModel = !this.popup.nightModel;
        },
        popupClose(e) {
            this.$emit("close");
        },
        unlike(e) {
            if (this.config.id) {
                let url = this.config.type == 2 ? '?ct=member_publish&ac=uninterest' : '?ct=news&ac=uninterest';
                let params = {};
                if(this.config.type == 2){
                    params.publish_id = this.config.id;
                }else if(this.config.type == 1){
                    params.news_id = this.config.id;
                }
                this.$http.post(url,params).then(response=>{
                    let {data} = response;
                    if(data.code != 0) {
                        this.$toast(data.msg);
                    }else{
                        this.$utils.unlike.set(this.config.id);
                        window.$zEvent.$emit("UNLIKE", this.config.id);
                        this.$emit('unlike');
                        this.popupClose();
                    }
                }).catch(e=>{
                    this.$toast('操作失败');
                })
            }
        },
        reportAction() {
            if (this.$utils.app.isApp) {
                location.href = this.$utils.app.link.report;
                this.popupClose();
            } else {
                this.$emit("report");
            }
        },
        wxshare(){
            this.$toast("功能开发中，敬请期待...")
            this.popupClose();
        },
        qqshare(){
            this.$toast("功能开发中，敬请期待...");
            this.popupClose();
        },
        linkshare(){
           this.$copyText(window.copy_url || window.location.href).then(function (e) {
            }, function (e) {
                console.log(e)
            })
            this.popupClose();
        },
        eshare(){
            var name = '',
                title = this.config.email_title || document.getElementById("title").innerHTML,
                con = this.config.email_content || document.getElementById("cont").innerHTML;
            if(con) con = con.replace(/<p>/g, "%0A").replace(/<\/p>/g, "%0A").replace(/<figure>/g," ").replace(/<\/figure>/g," ")
            var copyname = '';
            var url = 'mailto:'+name+'?'+copyname+'&subject='+title+'&body='+con;
            window.location.href = url;
            this.popupClose();
        },
    }
};

</script>

<style lang="less">
.popup-more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
    transition: transform 0.3s;
    transition-delay: 0.1s;
    transform: translateY(100%);
    .option {
        margin-bottom: 50px;
        display: flex;

        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            color: #282828;
            span {
                margin-top: 12px;
                line-height: 1;
            }
        }
    }
    .share{
        padding-top: 40px;
        padding-bottom:40px;
        margin-bottom: 10px;
        display: flex; 
        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            color: #282828;
            span {
                margin-top: 12px;
                line-height: 1;
            }
            i{
                border-radius: 100px;
            }
        }
        button{
            border:none;
            background: none;
        }
    }
    .slide {
        padding-top: 32px;
        border-bottom: 1px solid #efefef;
        .pick {
            position: relative;
            height: 30px;
            span {
                position: absolute;
                top: 0;
                line-height: 30px;
                color: #919191;
                font-size: 28px;
                text-align: center;
                &:first-child {
                    left: 0%;
                }
                &:nth-of-type(2) {
                    left: 25%;
                    transform: translateX(-50%);
                }
                &:nth-of-type(3) {
                    left: 50%;
                    transform: translateX(-50%);
                }
                &:nth-of-type(4) {
                    left: 75%;
                    transform: translateX(-50%);
                }
                &:nth-of-type(5) {
                    right: 0;
                }

                &.on {
                    color: #e64a19;
                }
            }
        }
        .range {
            position: relative;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            .line {
                position: relative;
                height: 4px;
                width: 100%;
                border-radius: 10px;
                background-color: #efefef;

                span {
                    position: absolute;
                    height: 100%;
                    background: #e64a19;

                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        background-color: #e64a19;
                        transform: translate(50%, -50%);
                    }
                }
            }
            input[type="range"] {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
                width: 100%; /* Specific width is required for Firefox. */
                // background: transparent; /* Otherwise white in Chrome */
            }

            input[type="range"]:focus {
                outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                border: none;
                height: 30px;
                width: 30px;
                border-radius: 50%;
                background: #e64a19;
                cursor: pointer;
                margin-top: -13px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
            }

            input[type="range"]::-webkit-slider-runnable-track {
                height: 4px;
                background-color: #efefef;
                border-radius: 10px; /*将轨道设为圆角的*/
            }
            input[type="range"]:focus::-webkit-slider-runnable-track {
                background: #e64a19;
            }
        }
    }
    .slide,
    .cancel {
        margin: 0 30px;
    }
    .cancel {
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #efefef;
        height: 100px;
        color: #919191;
        font-size: 32px;
    }
}
.ui-popup.popup-in {
    .popup-more {
        transform: translateY(0);
    }
}

</style>
